<template>
	<div>
		<div class="app-contain">
			<div class="list_search_view">
				<div class="btn_view">
					<el-button type="warning" @click="echartClick1">请假统计</el-button>
				</div>
			</div>
			<br>
			<!-- 统计图弹窗 -->
			<el-dialog v-model="echartVisible" :title="'请假统计'" width="70%">
				<div id="qingjiariqiEchart1" style="width:100%;height:600px;"></div>
				<div id="kechengmingchengEchart1" style="width:100%;height:600px;"></div>
				<template #footer>
					<span class="formModel_btn_box">
						<el-button class="formModel_cancel" @click="echartVisible=false">取消</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		nextTick,
		inject
	} from 'vue'
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	
	// 统计图1
	const echarts = inject("echarts")
	const echartVisible = ref(false)
	const echartClick1 = ()=>{
		echartVisible.value = true
		nextTick(()=>{
			var qingjiariqiEchart1 = echarts.init(document.getElementById("qingjiariqiEchart1"),'macarons');
			context?.$http({
				url: `qingjiashenpi/group/qingjiariqi`,
				method: 'get'
			}).then(res=>{
				let obj = res.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<obj.length;i++){
				    // xAxis.push(obj[i].kechengmingcheng);
				    // yAxis.push(parseFloat((obj[i].total)));
				    // pArray.push({
				    //     value: parseFloat((obj[i].total)),
				    //     name: obj[i].kechengmingcheng
				    // })
				    xAxis.push('总人数');
				    yAxis.push(parseFloat((obj[i].total)));
				    pArray.push({
				        value: parseFloat((obj[i].total)),
				        name: '总人数'
				    })
				}
				var option = {};
                option = {
                    title: {
                        text: '请假统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis,
                        axisLabel : {
                            rotate:40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
				// 使用刚指定的配置项和数据显示图表。
				qingjiariqiEchart1.setOption(option);
				  //根据窗口的大小变动图表
				window.onresize = function() {
				    qingjiariqiEchart1.resize();
				};
			})
			var kechengmingchengEchart1 = echarts.init(document.getElementById("kechengmingchengEchart1"),'macarons');
			context?.$http({
				url: `qingjiashenpi/group/kechengmingcheng`,
				method: 'get'
			}).then(res=>{
				let obj = res.data.data
				let xAxis = [];
				let yAxis = [];
				let pArray = []
				for(let i=0;i<obj.length;i++){
				    xAxis.push(obj[i].kechengmingcheng);
				    yAxis.push(parseFloat((obj[i].total)));
				    pArray.push({
				        value: parseFloat((obj[i].total)),
				        name: obj[i].kechengmingcheng
				    })
				}
				var option = {};
                option = {
                    title: {
                        text: '请假统计',
                        left: 'center'
                    },
                    tooltip: {
                      trigger: 'item',
                      formatter: '{b} : {c}'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxis,
                        axisLabel : {
                            rotate:40
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxis,
                        type: 'bar'
                    }]
                };
				// 使用刚指定的配置项和数据显示图表。
				kechengmingchengEchart1.setOption(option);
				  //根据窗口的大小变动图表
				window.onresize = function() {
				    kechengmingchengEchart1.resize();
				};
			})
		})
	}
</script>

<style lang="scss" scoped>
.list_search_view {
	margin: 0 0 20px;
	.btn_view {
		margin: 20px 0;
		display: flex;
		:deep(.el-button--warning){
			border: 1px solid #ddd;
			cursor: pointer;
			border-radius: 0;
			padding: 0 16px;
			margin: 0;
			outline: none;
			color: #333;
			background: #f5f5f5;
			width: auto;
			font-size: 18px;
			height: 32px;
		}
		:deep(.el-button--warning:hover){
			background: rgba(255, 128, 0, 0.5);
		}
	}
}
</style>
